<template>
  <div class="relative flex items-top min-h-screen bg-gray-100 p-5">
    <div class="flex flex-col w-screen">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/flipcard' }"
          >记忆卡片</el-breadcrumb-item
        >
        <el-breadcrumb-item>我的卡片组</el-breadcrumb-item>
      </el-breadcrumb>
      <div
        class="w-96 h-40 bg-white p-3 ml-3 mt-10 transition hover:shadow-md"
        v-bind:class="{ cardAnim: tr }"
        @click="clickCard(index)"
      >
        <div class="text-xl text mt-14 text-center align-middle">
          {{ mainTitle }}
        </div>
      </div>
      <div class="butw mt-5">
        <el-button class="wdwa l ml-3" @click="back()" :disabled="thisid == 0"
          >上一页</el-button
        >
        <span class="ml-5"> {{ this.thisid + 1 }}/{{ this.card.length }}</span>
        <el-button
          class="wdwa r"
          @click="tonext()"
          :disabled="thisid == card.length - 1"
          >下一页</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tr: false,
      card: [],
      mainTitle: "",
      st: false,
      thisid: 0,
    };
  },
  mounted() {
    if (!this.$store.state.info.isLogin) {
      this.$message.error("需要登录使用此功能");
      setTimeout(() => {
        this.$router.push({
          path: "/",
        });
      }, 1000);
    } else {
      axios
        .post("/api/myCardGroups", {
          uid: this.$store.state.info.userInfo.uid,
        })
        .then((res) => {
          var cards = res.data.data;
          console.log(cards);
          this.cardGroups = cards;
        });
    }
    this.mainTitle = "加载中...";
    axios
      .post("/api/getCards", {
        groupID: this.$route.query.uid,
      })
      .then((res) => {
        var cards = res.data.data;
        this.card = cards;
        console.log(this.card);
      });
    setTimeout(() => {
      this.mainTitle = this.card[0].card_name;
    }, 1000);
  },
  methods: {
    back() {
      this.thisid--;
      this.mainTitle = this.card[this.thisid].card_name;
      this.st = false;
    },
    tonext() {
      this.thisid++;
      this.mainTitle = this.card[this.thisid].card_name;
      this.st = false;
    },
    clickCard(index) {
      this.tr = this.tr ? false : true;
      this.st = this.st ? false : true;
      if (this.st) {
        setTimeout(() => {
          this.mainTitle = this.card[this.thisid].card_noted;
        }, 500);
      } else {
        setTimeout(() => {
          this.mainTitle = this.card[this.thisid].card_name;
        }, 500);
      }
      console.log(this.st);
      setTimeout(() => {
        this.tr = false;
      }, 500);
    },
  },
};
</script>
<style>
.cardAnim {
  animation: rotate 0.5s ease-in 0s;
}
@keyframes rotate {
  100% {
    transform: rotateX(180deg);
  }
}
.wdwa {
  width: 150px;
  display: inline;
}
.r {
  float: right;
}
.butw {
  width: 400px;
}
</style>